import { Input, NavBar, TextArea } from 'antd-mobile'
import { useState } from 'react'
import { InputShow } from '../Edit'

import styles from './index.module.scss'

type Props = {
  type: InputShow['type']
  data: string
  updateInfo: (type: string, val: string, onClose: () => void) => void
  onClose: () => void
}
const EditInput = ({ type, onClose, data, updateInfo }: Props) => {
  // 修改昵称状态
  const [value, setValue] = useState(data)
  // 区分昵称和简介修改 => isName true 昵称修改 | false 简介修改
  const isName = type === 'name'
  return (
    <div className={styles.root}>
      <NavBar
        onBack={onClose}
        className="navbar"
        right={
          <span
            onClick={() => {
              updateInfo(type, value, onClose)
            }}
            className="commit-btn"
          >
            提交
          </span>
        }
      >
        编辑{isName ? '昵称' : '简介'}
      </NavBar>

      <div className="edit-input-content">
        <h3>{isName ? '昵称' : '简介'}</h3>
        {/* 
        1. 修改昵称：显示输入框
        2. 修改简介：显示文本域
         */}

        {isName ? (
          <div className="input-wrap">
            <Input value={value} onChange={setValue} placeholder="请输入昵称" />
          </div>
        ) : (
          <TextArea
            className="textarea"
            placeholder="请输入简介"
            // 展示：右下角的字数统计
            showCount
            // 指定内容最大长度
            maxLength={100}
            // 指定 文本域 展示内容的行数（文本域高度）
            rows={4}
            value={value}
            onChange={setValue}
          />
        )}
      </div>
    </div>
  )
}

export default EditInput
